﻿$(document).ready(function () {
    startSlider();

    $("#Slider").hover(
        function () {
            var slider = $("#Slider .active-slider");
            $(slider).stop();
        },
        function () {
            startSlider();
        }
    );
})

//hàm khởi động Slider
function startSlider() {
    var slider = $("#Slider").children(".active-slider");
    var timeToSlide = parseInt(slider.width(), 10) * 15;
    $(slider).animate({ width: '0px' }, timeToSlide, "linear", loopSlider);
}

//hàm lập Slider
function loopSlider() {
    removeActiveSliderClass();

    var slider = $("#Slider").children(".active-slider");
    // [*15] => cứ rộng 1px tương ứng với 15 millisecond => mục đích để lúc đưa chuột ra ngoài thì phải chạy hiệu ứng có tốc độ giống nhau
    var timeToSlide = parseInt(slider.width(), 10) * 15;
    $(slider).animate({ width: '0px' }, timeToSlide, "linear", loopSlider);
}

//hàm thay đổi class Active-Slider => xác nhận hiệu ứng đang ở đâu?
function removeActiveSliderClass() {
    var slider = $("#Slider").children(".active-slider");
    $(slider).removeClass("active-slider");
    $(slider).next().addClass("active-slider");
    moveToLastElement(slider);
}

// hàm di chuyển đối tượng về cuối cùng
function moveToLastElement(element) {
    var sliderToMove = element.clone();
    element.remove();
    $('#Slider').append(sliderToMove);
    sliderToMove.width("230px");
}